<template>
  <div class="product-one-box">
    <div class="box" v-for="(item, index) in productData" :key="index" @click="handleProduct(item.id)">
      <van-row>
        <van-col span="9">
          <img v-lazy="item.slide_url" alt="">
        </van-col>
        <van-col span="15" class="van-msg line-bottom">
          <div class="msg">
            <p class="clamp2">
              {{item.name}}
            </p>
            <p class="model">
              {{item.slide_id}}
            </p>
            <span
              v-if="item.type"
              class="target"
              :class="item.type == 1 ? 'newBgc':'subtractBgc'"
              >
              {{item.typeText}}
            </span>
            <p class="price">
              <i>￥</i>{{item.discount_price}}
              <span>
                已售{{item.sales_volume}}件
              </span>
              <del v-if="showOriginalPrice">
                ￥{{item.original_price}}
              </del>
            </p>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data() {
      return {

      }
    },
    props:['productData','showOriginalPrice'],
    methods: {
      handleProduct(id){
        this.$emit('getProductId',{id:id})
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/base";

.product-one-box{

  .box{
    display: flex;
    justify-content: center;
    height: 146px;
    padding:10px 0 0 15px;
    box-sizing: border-box;

    .van-row{
      width: 100%;

      img{
        width: 130px;
        height: 130px;
      }

      .van-msg{
        height: 100%;
        font-size: 14px;

        .msg{
          padding:8px 24px 0 4px;

          .model{
            font-size: 12px;
            color: #999AA3;
            margin-top: 8px;
          }

          .target{
            display: inline-block;
            margin-top: 8px;
            color: #fff;
            border-radius:2px;
            padding:2px 4px;
            font-size: 12px;
          }

          .newBgc{
            background-color: #B989F4;
          }

          .subtractBgc{
            background-color: #F87676;
          }

          .price{
            position: absolute;
            bottom: 8px;
            margin-top: 8px;
            color: #C55E5E;
            font-size: 16px;
            font-weight: bold;

            i{
              font-size: 12px;
              font-style: normal;
            }

            span,del{
              position: relative;
              top:-1px;
              font-weight: normal;
              font-size: 12px;
              color: #7A7B82;
            }
          }
        }
      }
    }
  }
}


@media screen and (min-width: 376px) and (max-width: 414px) {
  .van-col--9{
    width: 33.333333333% !important;
  }

  .van-col--15{
    width: 66.66666667% !important;
  }
}

</style>
